<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站视频智能分析系统 - AI深度解读</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <div class="logo">
                <svg class="bilibili-logo" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path d="M155 40 L175 20 M45 40 L25 20" stroke="currentColor" stroke-width="12" stroke-linecap="round"/>
                    <rect x="20" y="40" width="160" height="120" rx="20" fill="currentColor"/>
                    <circle cx="70" cy="90" r="15" fill="white"/>
                    <circle cx="130" cy="90" r="15" fill="white"/>
                    <path d="M70 130 Q100 140 130 130" stroke="white" stroke-width="10" fill="none" stroke-linecap="round"/>
                </svg>
                <h1>BiliBili视频智能分析</h1>
            </div>
            <p class="subtitle">🎯 AI驱动 · 四大板块深度解读 · 实时流式响应</p>

            <!-- 登录状态区域 -->
            <div class="login-status" id="loginStatus">
                <div class="login-info" id="loginInfo">
                    <i class="fas fa-user-circle"></i>
                    <span id="loginText">检查登录状态...</span>
                </div>
                <div class="login-actions" id="loginActions">
                    <button id="loginBtn" class="login-btn" title="扫码登录">
                        <i class="fas fa-qrcode"></i>
                        <span>登录</span>
                    </button>
                    <button id="logoutBtn" class="logout-btn hidden" title="退出登录">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>退出</span>
                    </button>
                </div>
            </div>
        </header>

        <!-- 主要内容区 -->
        <main class="main-content">
            <!-- 输入区域 -->
            <section class="input-section">
                <div class="input-container">
                    <div class="input-wrapper">
                        <i class="fas fa-link input-icon"></i>
                        <input
                            type="text"
                            id="videoUrl"
                            placeholder="请输入B站视频链接（BV号）支持多种格式..."
                            class="video-input"
                        >
                    </div>
                    <div class="input-actions">
                        <button id="analyzeBtn" class="analyze-btn">
                            <i class="fas fa-magic"></i>
                            <span>开始分析</span>
                        </button>
                        <button id="batchBtn" class="batch-btn" title="批量分析">
                            <i class="fas fa-list"></i>
                            <span>批量</span>
                        </button>
                    </div>
                </div>
                <div class="example-links">
                    <span class="example-label">💡 快速体验：</span>
                    <a href="#" class="example-link" data-url="https://www.bilibili.com/video/BV15C4Pz9EyT">苏联笑话</a>
                    <a href="#" class="example-link" data-url="https://www.bilibili.com/video/BV1uv411q7Mv">科技视频</a>
                </div>
            </section>

            <!-- 加载动画和进度 -->
            <div id="loadingSection" class="loading-section hidden">
                <div class="loading-animation">
                    <div class="bilibili-loading">
                        <div class="loading-tv">
                            <i class="fas fa-tv"></i>
                        </div>
                        <div class="loading-wave"></div>
                    </div>
                </div>
                
                <!-- 进度条 -->
                <div class="progress-container">
                    <div class="progress-bar">
                        <div id="progressBar" class="progress-fill"></div>
                    </div>
                    <p class="progress-text" id="progressText">0%</p>
                </div>
                
                <p class="loading-text" id="loadingText">正在分析视频内容...</p>
                <p class="loading-subtext" id="loadingSubtext">获取视频信息中</p>
                
                <!-- 实时步骤指示 -->
                <div class="steps-indicator">
                    <div class="step" data-step="1">
                        <div class="step-icon"><i class="fas fa-video"></i></div>
                        <div class="step-label">获取视频</div>
                    </div>
                    <div class="step" data-step="2">
                        <div class="step-icon"><i class="fas fa-comments"></i></div>
                        <div class="step-label">分析弹幕</div>
                    </div>
                    <div class="step" data-step="3">
                        <div class="step-icon"><i class="fas fa-images"></i></div>
                        <div class="step-label">提取画面</div>
                    </div>
                    <div class="step" data-step="4">
                        <div class="step-icon"><i class="fas fa-brain"></i></div>
                        <div class="step-label">AI分析</div>
                    </div>
                </div>
            </div>

            <!-- 结果展示区 -->
            <section id="resultSection" class="result-section hidden">
                <!-- 视频信息卡片 -->
                <div class="video-card">
                    <div class="video-cover">
                        <img id="videoCover" src="" alt="视频封面">
                        <div class="video-badges">
                            <span class="badge badge-subtitle" id="badgeSubtitle"></span>
                            <span class="badge badge-frames" id="badgeFrames"></span>
                        </div>
                    </div>
                    <div class="video-details">
                        <h2 id="videoTitle" class="video-title"></h2>
                        <div class="video-meta">
                            <span class="meta-item">
                                <i class="fas fa-user-circle"></i>
                                <span id="videoAuthor"></span>
                            </span>
                            <span class="meta-item">
                                <i class="fas fa-eye"></i>
                                <span id="videoView"></span>
                            </span>
                            <span class="meta-item">
                                <i class="fas fa-thumbs-up"></i>
                                <span id="videoLike"></span>
                            </span>
                            <span class="meta-item">
                                <i class="fas fa-coins"></i>
                                <span id="videoCoin"></span>
                            </span>
                            <span class="meta-item">
                                <i class="fas fa-clock"></i>
                                <span id="videoDuration"></span>
                            </span>
                        </div>
                        <div class="video-stats">
                            <span class="stat-item">
                                <i class="fas fa-comment-dots"></i>
                                弹幕 <strong id="danmakuCount">0</strong>
                            </span>
                            <span class="stat-item">
                                <i class="fas fa-comments"></i>
                                评论 <strong id="commentCount">0</strong>
                            </span>
                        </div>
                    </div>
                </div>

                <!-- 四大板块标签页 -->
                <div class="tabs-wrapper">
                    <div class="tabs">
                        <button class="tab-btn active" data-tab="summary">
                            <i class="fas fa-file-alt"></i>
                            <span>内容总结</span>
                        </button>
                        <button class="tab-btn" data-tab="mindmap">
                            <i class="fas fa-sitemap"></i>
                            <span>思维导图</span>
                        </button>
                        <button class="tab-btn" data-tab="danmaku">
                            <i class="fas fa-comment-dots"></i>
                            <span>弹幕分析</span>
                        </button>
                        <button class="tab-btn" data-tab="evaluation">
                            <i class="fas fa-star"></i>
                            <span>综合评价</span>
                        </button>
                    </div>
                </div>

                <!-- 标签页内容 -->
                <div class="tab-content">
                    <!-- 第一板块：内容总结 -->
                    <div id="summaryTab" class="tab-pane active">
                        <div class="content-card">
                            <div id="summaryContent" class="markdown-content"></div>
                        </div>
                    </div>
                    
                    <!-- 第二板块：思维导图 -->
                    <div id="mindmapTab" class="tab-pane">
                        <div class="content-card">
                            <div id="mindmapContent" class="markdown-content"></div>
                        </div>
                    </div>
                    
                    <!-- 第三板块：弹幕分析 -->
                    <div id="danmakuTab" class="tab-pane">
                        <div class="content-card">
                            <div id="danmakuContent" class="markdown-content"></div>

                            <!-- 词云图区域 -->
                            <div class="wordcloud-section" id="wordcloudSection">
                                <h4><i class="fas fa-cloud"></i> 弹幕关键词云</h4>
                                <div class="wordcloud-container">
                                    <canvas id="wordcloudCanvas" width="800" height="400"></canvas>
                                    <div class="wordcloud-loading" id="wordcloudLoading">
                                        <i class="fas fa-spinner fa-spin"></i>
                                        <span>生成词云中...</span>
                                    </div>
                                </div>
                                <div class="wordcloud-controls">
                                    <button class="wordcloud-btn" id="refreshWordcloudBtn" title="刷新词云">
                                        <i class="fas fa-sync-alt"></i>
                                        刷新
                                    </button>
                                    <button class="wordcloud-btn" id="downloadWordcloudBtn" title="下载词云">
                                        <i class="fas fa-download"></i>
                                        下载
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 第四板块：综合评价 -->
                    <div id="evaluationTab" class="tab-pane">
                        <div class="content-card">
                            <div id="evaluationContent" class="markdown-content"></div>
                        </div>
                    </div>
                </div>

                <!-- 推荐视频区域 -->
                <div id="recommendationsSection" class="recommendations-section hidden">
                    <h3><i class="fas fa-lightbulb"></i> 相关推荐</h3>
                    <div class="recommendation-grid" id="recommendationGrid"></div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <button class="action-btn" id="copyBtn">
                        <i class="fas fa-copy"></i>
                        <span>复制全文</span>
                    </button>
                    <button class="action-btn" id="downloadBtn">
                        <i class="fas fa-download"></i>
                        <span>下载报告</span>
                    </button>
                    <button class="action-btn" id="recommendBtn" title="获取相关推荐">
                        <i class="fas fa-lightbulb"></i>
                        <span>相关推荐</span>
                    </button>
                    <button class="action-btn" id="seriesBtn" title="分析UP主系列">
                        <i class="fas fa-layer-group"></i>
                        <span>UP主系列</span>
                    </button>
                    <button class="action-btn primary" id="newAnalysisBtn">
                        <i class="fas fa-plus-circle"></i>
                        <span>新建分析</span>
                    </button>
                </div>
            </section>

            <!-- 错误提示 -->
            <div id="errorSection" class="error-section hidden">
                <div class="error-card">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h3>分析出错</h3>
                    <p id="errorMessage"></p>
                    <button class="retry-btn" id="retryBtn">
                        <i class="fas fa-redo-alt"></i>
                        <span>重新分析</span>
                    </button>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="footer">
            <p>
                <i class="fas fa-heart"></i>
                Powered by <strong>OpenAI Vision API</strong> & <strong>bilibili-api</strong> | 
                Made with ❤️ for BiliBili
            </p>
        </footer>
    </div>

    <!-- 批量分析模态框 -->
    <div id="batchModal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3>批量视频分析</h3>
                <button class="close-btn" onclick="closeBatchModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <textarea id="batchInput" placeholder="请输入多个B站视频链接，每行一个..." rows="6"></textarea>
            </div>
            <div class="modal-footer">
                <button class="btn-cancel" onclick="closeBatchModal()">取消</button>
                <button class="btn-primary" onclick="startBatchAnalysis()">
                    <i class="fas fa-play"></i>
                    开始批量分析
                </button>
            </div>
        </div>
    </div>

    <!-- B站登录模态框 -->
    <div id="loginModal" class="modal hidden">
        <div class="modal-content login-modal-content">
            <div class="modal-header">
                <h3>
                    <i class="fas fa-qrcode"></i>
                    B站扫码登录
                </h3>
                <button class="close-btn" onclick="closeLoginModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="login-container">
                    <div class="qr-section" id="qrSection">
                        <div class="qr-placeholder" id="qrPlaceholder">
                            <i class="fas fa-qrcode fa-3x"></i>
                            <p>正在生成二维码...</p>
                        </div>
                        <div class="qr-code hidden" id="qrCode">
                            <img id="qrImage" src="" alt="登录二维码">
                        </div>
                        <div class="login-tips">
                            <p><i class="fas fa-info-circle"></i> 请使用B站手机APP扫描二维码</p>
                            <p class="small-text">扫描后在手机上确认登录即可</p>
                        </div>
                    </div>

                    <div class="login-status-section hidden" id="loginStatusSection">
                        <div class="status-icon">
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                        <div class="status-text" id="statusText">等待扫码...</div>
                    </div>

                    <div class="login-success-section hidden" id="loginSuccessSection">
                        <div class="success-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="success-text">
                            <p>登录成功！</p>
                            <p class="small-text">凭据已自动保存</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-cancel" onclick="closeLoginModal()">取消</button>
                <button class="btn-refresh" id="refreshQRBtn" onclick="refreshQRCode()">
                    <i class="fas fa-sync-alt"></i>
                    刷新二维码
                </button>
            </div>
        </div>
    </div>

    <!-- Toast提示 -->
    <div id="toast" class="toast hidden">
        <i class="toast-icon"></i>
        <span class="toast-message"></span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/wordcloud@1.2.2/src/wordcloud2.js"></script>
    <script src="script.js"></script>
</body>
</html>
